<template>
  <el-dialog
    title="策略管理"
    :visible="visible"
    width="630px"
    @close="close"
    @open="open"
  >
    <div class="aisle_header">
      <div class="header_txt">
        销售量：<span>{{ quantity }}个</span>
      </div>
      <div class="header_txt">
        销售额：<span>{{ saleroom }}万元</span>
      </div>
      <div class="header_txt">
        补货次数：<span>{{ supplyCount }}次</span>
      </div>
      <div class="header_txt">
        维修次数：<span>{{ repairCount }}次</span>
      </div>
    </div>
    <el-row>商品销量（月）</el-row>
    <el-row class="myrow" v-if="SkuCollect.length">
      <el-col
        class="mycol"
        :span="6"
        v-for="(item, index) in SkuCollect"
        :key="index"
      >
        <el-row>
          <el-col :span="14" class="ellipsis"> {{ item.skuName }}</el-col>
          <el-col :span="10">：{{ item.count }}</el-col>
        </el-row>
      </el-col>
    </el-row>
    <div v-else style="text-align:center;">当前设备未销售商品</div>
  </el-dialog>
</template>

<script>
import dayjs from 'dayjs'
import { bigNumber } from '@/utils/publicFuntion'
import { getOrderCount, getOrderAmount } from '@/api/layout'
import {
  getSupplyCount,
  getRepairCount,
  getSkuCollect
} from '@/api/device-state'
export default {
  name: 'DeviceStateInfo',
  data () {
    return {
      // 具体时间时分秒
      orderTime: {
        start: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      // 初略事件
      nextTime: {
        start: dayjs().startOf('month').format('YYYY-MM-DD'),
        end: dayjs().format('YYYY-MM-DD')
      },
      StateInfo: {}, // 当前售货机信息
      quantity: '0', // 销售量
      saleroom: '0', // 销售额
      supplyCount: '0', // 补货次数
      repairCount: '0', // 维修次数
      SkuCollect: [] // 商品销量
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    close () {
      this.quantity = '0'
      this.saleroom = '0'
      this.supplyCount = '0'
      this.repairCount = '0'
      this.SkuCollect = []
      this.$emit('update:visible', false)
    },
    async open () {
      this.quantity = await getOrderCount({
        ...this.orderTime,
        innerCode: this.StateInfo.innerCode
      })
      const res = await getOrderAmount({
        ...this.orderTime,
        innerCode: this.StateInfo.innerCode
      })
      this.saleroom = bigNumber(res)
      this.supplyCount = await getSupplyCount({
        ...this.nextTime,
        innerCode: this.StateInfo.innerCode
      })
      this.repairCount = await getRepairCount({
        ...this.nextTime,
        innerCode: this.StateInfo.innerCode
      })
      this.SkuCollect = await getSkuCollect({
        ...this.nextTime,
        innerCode: this.StateInfo.innerCode
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    border-radius: 10px;
    .el-dialog__header {
      font-weight: 700;
      .el-dialog__title {
        font-size: 16px;
      }
    }
    .el-dialog__body {
      padding-top: 20px;
      padding-left: 20px;
      .aisle_header {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 56px;
        background: #f3f6fb;
        margin-bottom: 20px;
        .header_txt {
          margin-right: 50px;
          span {
            font-size: 12px;
            color: #5f84ff;
          }
        }
        .el-button--primary {
          background-color: rgb(95, 132, 255);
          border: 0;
        }
      }
      .myrow {
        margin-top: 14px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        .mycol {
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          padding: 10px 0 10px 14px;
        }
      }
    }
  }
</style>
